<template>
  <div class="back" v-if="showToast">
    <div class="toast">
      <span>{{toast}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'toast',
    data () {
      return {
        toast: '',
        showToast: false
      }
    },
    methods: {
      toastFun: function (showToast, time, fn) {
        this.toast = showToast
        var that = this
        var timer = setTimeout(function () {
          that.showToast = false
          clearInterval(timer)
        }, time)
        this.showToast = true
        fn()
      }
    }
  }
</script>

<style scope lang="scss">
  .back{
    position: fixed;
    bottom: 79px;
    width: 100%;
    .toast{
      display: table;
      margin: 0 auto;
      background: #000000;
      opacity: 0.8;
      border-radius: 15px;
      span{
        color: #ffffff;
        font-size: 12px;
        padding: 5px 15px;
        display: table;
      }
    }
  }
</style>
